<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <hr />

    <a href="#/home">首页 </a>
    <a href="#/movie">电影 </a>
    <a href="#/about">关于 </a>
    <hr />
    <router-link to="/home">首页 </router-link>
    <router-link to="/movie1">电影1 </router-link>
    <router-link to="/movie2">电影2 </router-link>
    <router-link to="/movie3?name=zs&age=20">电影3 </router-link>

    <!-- 注意1：在 hash 地址中， / 后面的参数项，叫做“路径参T数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.params 来访问路径参数 -->

    <!-- 注意2：在 hash 地址中，? 后面的参数项，叫做“查询参数” -->
    <!-- 在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数 -->

    <!-- 注意3：在 this.$route 中，path 只是路径部分；fullPath 是完整的地址 -->
    <!-- 例如： -->
    <!-- /movie/2?name=zs&age=20 是 fullPath 的值 -->
    <!-- /movie/2 是 path 的值 -->
    <router-link to="/about">关于 </router-link>
    <router-link to="/main">前往main主页</router-link>
    <!-- 安装配置vue-router后就可以用 router-link来替代普通的 a 链接了,本质上也会被渲染成 a -->
    <hr />

    <button @click="goToMv1">跳转到mv1</button>
    <!-- push方法会增加一条历史记录 -->
    <button @click="goToMv2">跳转到mv2</button>
    <!-- replace方法会替换当前的历史记录 -->
    <button @click="goFront">前进1</button>
    <button @click="$router.back()">后退1</button>
    <button @click="goBack2">后退2</button>
    <hr />
    <!-- 只要在项目中安装和配置了vue-router就可以使用router-view这个组件了 -->
    <!-- 他的作用很单纯：占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    goToMv1() {
      this.$router.push("/movie1"); //参数是hash地址
    },
    goToMv2() {
      this.$router.replace("/movie2"); //参数是hash地址
    },
    goFront() {
      // this.$router.go(1); //参数为数字，如果层数超过上限则原地不动
      this.$router.forward();
    },
    // goBack1() {
    //   // this.$router.go(-1);
    //go(-1)可以写成
    //   this.$router.back();
    // },
    goBack2() {
      this.$router.go(-2);
    },
    //这些方法也可以直接在@click中写
  },
};
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
